<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录注册 - 獭米英语单词本</title>
  <link rel="stylesheet" href="../css/style.css">
  <style>
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      display: flex;
      flex-direction: column;
    }
    
    .main-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
    }
    
    .account-container {
      background: white;
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      padding: 40px;
      width: 100%;
      max-width: 400px;
      position: relative;
      overflow: hidden;
    }
    
    .account-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .account-header {
      text-align: center;
      margin-bottom: 32px;
    }
    
    .account-title {
      font-size: 28px;
      font-weight: 700;
      color: #1f2937;
      margin: 0 0 8px 0;
    }
    
    .account-subtitle {
      font-size: 14px;
      color: #6b7280;
      margin: 0;
    }
    
    .account-form {
      display: none;
    }
    
    .account-form.active {
      display: block;
    }
    
    .form-group {
      margin-bottom: 20px;
      position: relative;
    }
    
    .form-label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      margin-bottom: 6px;
    }
    
    .form-input {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }
    
    .form-input:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    .form-input.error {
      border-color: #ef4444;
    }
    
    .password-group {
      position: relative;
    }
    
    .password-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #6b7280;
      font-size: 16px;
      padding: 4px;
    }
    
    .password-toggle:hover {
      color: #374151;
    }
    
    .remember-login {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      color: #374151;
      margin-top: 8px;
    }
    
    .remember-checkbox {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      cursor: pointer;
      accent-color: #667eea;
    }
    
    .remember-text {
      user-select: none;
      cursor: pointer;
    }
    
    .remember-login:hover .remember-text {
      color: #667eea;
    }
    
    .captcha-group {
      display: flex;
      gap: 12px;
      align-items: flex-end;
    }
    
    .captcha-input {
      flex: 1;
    }
    
    .captcha-display {
      background: #f3f4f6;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      padding: 12px 16px;
      font-family: 'Courier New', monospace;
      font-size: 16px;
      font-weight: bold;
      color: #374151;
      letter-spacing: 2px;
      cursor: pointer;
      user-select: none;
      min-width: 80px;
      text-align: center;
    }
    
    .captcha-display:hover {
      background: #e5e7eb;
    }
    
    .form-error {
      color: #ef4444;
      font-size: 12px;
      margin-top: 4px;
      display: none;
    }
    
    .form-error.show {
      display: block;
    }
    
    .form-button {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 20px;
    }
    
    .form-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    .form-button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    
    .form-switch {
      text-align: center;
      font-size: 14px;
      color: #6b7280;
    }
    
    .form-switch a {
      color: #667eea;
      text-decoration: none;
      font-weight: 500;
    }
    
    .form-switch a:hover {
      text-decoration: underline;
    }
    
    .loading {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #ffffff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s ease-in-out infinite;
      margin-right: 8px;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    /* 页脚特殊样式 */
    .footer {
      background-color: rgba(248, 249, 250, 0.95);
      backdrop-filter: blur(10px);
      margin-top: 0;
    }
  </style>
</head>
<body>
  <div class="main-content">
    <div class="account-container">
    <div class="account-header">
      <h1 class="account-title" id="account-title">登录账户</h1>
      <p class="account-subtitle">欢迎回到獭米英语单词本</p>
    </div>
    
    <!-- 登录表单 -->
    <form class="account-form active" id="login-form">
      <div class="form-group">
        <label class="form-label" for="login-account">账号</label>
        <input type="text" class="form-input" id="login-account" placeholder="请输入手机号或邮箱" required>
        <div class="form-error" id="login-account-error"></div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="login-password">密码</label>
        <div class="password-group">
          <input type="password" class="form-input" id="login-password" placeholder="请输入密码" required>
          <button type="button" class="password-toggle" data-target="login-password">👁️</button>
        </div>
        <div class="form-error" id="login-password-error"></div>
      </div>
      
      <div class="form-group">
        <label class="remember-login">
          <input type="checkbox" id="remember-login" class="remember-checkbox">
          <span class="remember-text">记住登录状态</span>
        </label>
      </div>
      
      <button type="submit" class="form-button" id="login-submit">
        登录
      </button>
      
      <div class="form-switch">
        没有账号？<a href="#" id="to-register">前往注册</a>
      </div>
    </form>
    
    <!-- 注册表单 -->
    <form class="account-form" id="register-form">
      <div class="form-group">
        <label class="form-label" for="register-account">账号</label>
        <input type="text" class="form-input" id="register-account" placeholder="请输入手机号或邮箱" required>
        <div class="form-error" id="register-account-error"></div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="register-nickname">昵称</label>
        <input type="text" class="form-input" id="register-nickname" placeholder="请输入昵称" required>
        <div class="form-error" id="register-nickname-error"></div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="register-password">密码</label>
        <div class="password-group">
          <input type="password" class="form-input" id="register-password" placeholder="请输入密码" required>
          <button type="button" class="password-toggle" data-target="register-password">👁️</button>
        </div>
        <div class="form-error" id="register-password-error"></div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="register-captcha">验证码</label>
        <div class="captcha-group">
          <input type="text" class="form-input captcha-input" id="register-captcha" placeholder="请输入验证码" required>
          <div class="captcha-display" id="captcha-display">ABCD</div>
        </div>
        <div class="form-error" id="register-captcha-error"></div>
      </div>
      
      <button type="submit" class="form-button" id="register-submit">
        注册
      </button>
      
      <div class="form-switch">
        已有账号？<a href="#" id="to-login">前往登录</a>
      </div>
    </form>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="footer-container">
      <div class="footer-content">
        <p>
          <a href="https://www.tami-network.com/" target="_blank">獭米网络官网</a>
          <span class="footer-separator">|</span>
          <a href="mailto:tami-network@163.com">tami-network@163.com</a>
          <span class="footer-separator">|</span>
          <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024099604号-2</a>
          <span class="footer-separator">|</span>
          ©2025 成都獭米网络科技有限公司 保留所有权利
          <span class="footer-separator">|</span>
          v1.1.2
        </p>
      </div>
    </div>
  </footer>

  <script src="../js/plugins.js"></script>
  <script src="../js/account.js"></script>
</body>
</html>